<template>
    <div class="announcement">
        <h1 v-if="infodata.detail1" class="title">| {{infodata.title}}</h1>
        <h1 v-if="infodata.msg1" class="title1">{{infodata.title}}</h1>
        
        <el-row :gutter="30">
          <el-col :span="8">
              <div class="heard">
                 <img src="http://p6dwecco6.bkt.clouddn.com/img/index-8.png" alt="">
                 <div v-if="infodata.detail1">
                   <p>{{infodata.detail1}}</p>
                
                   <p>追逐经济发展趋势
                        <nuxt-link :to="infodata.url1">
                           <span>查看更多 ></span>
                        </nuxt-link>
                  </p>
                 </div>
                 <div class="littlemsg" v-if="infodata.msg1">
                   <p>&nbsp; </p>
                   <p>{{infodata.msg1}}</p>
                 </div>
              </div>
              <div class="newslist">
              <ul>
                  <li v-for="(item,index) in newbox1" :key="index">
                    <nuxt-link :to="'/post/' + item.pid"><span>{{item.name}}</span></nuxt-link>
                    <span class="time">{{item.createtime.slice(0,10)}}</span>
                  </li>  
                </ul>
              </div>
          </el-col>
          <el-col :span="8">
            <div class="heard">
                 <img src="http://p6dwecco6.bkt.clouddn.com/img/index-9.png" alt="">
                 <div v-if="infodata.detail2">
                   <p>{{infodata.detail2}}</p>
                   <p>网罗财经实时热点
                      <nuxt-link :to="infodata.url2">
                           <span>查看更多 ></span>
                        </nuxt-link>
                     </p>
                 </div>
                 <div class="littlemsg" v-if="infodata.msg2">
                   <p>{{infodata.msg2}}</p>
                   <p>{{infodata.msg21}}</p>
                 </div>
              </div>
              <div class="newslist">
                <ul>
                  <li v-for="(item,index) in newbox2" :key="index">
                    <nuxt-link :to="'/post/' + item.pid"><span>{{item.name}}</span></nuxt-link>
                   <span class="time">{{item.createtime.slice(0,10)}}</span>
                  </li>  
                </ul>
              </div>
          </el-col>
          <el-col :span="8">
            <div class="heard">
                 <img src="http://p6dwecco6.bkt.clouddn.com/img/index-10.png" alt="">
                 <div v-if="infodata.detail3">
                   <p>{{infodata.detail3}}</p>
                   <p>察市场动态变幻
                        <nuxt-link :to="infodata.url3">
                           <span>查看更多 ></span>
                        </nuxt-link>
                     </p>
                 </div>
                 <div class="littlemsg" v-if="infodata.msg3">
                   <p>&nbsp;</p>
                   <p>{{infodata.msg3}}</p>
                 </div>
              </div>
              <div class="newslist">
                 <ul>
                  <li v-for="(item,index) in newbox3" :key="index">
                    <nuxt-link :to="'/post/' + item.pid"><span>{{item.name}}</span></nuxt-link>
                   <span class="time">{{item.createtime.slice(0,10)}}</span>
                  </li>  
                </ul>
              </div>
          </el-col>
        </el-row>

    </div>
</template>
<script>
export default {
  props: {
    infodata: {},
    newbox1: {
      type: Array,
      default: function() {
        return [];
      }
    },
    newbox2: {
      type: Array,
      default: function() {
        return [];
      }
    },
    newbox3: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  methods: {
    gonewsbox(val) {
      this.$router.push(val);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title1{
    color: #cd9c54;
    margin-left: 10px;
    font-size: 22px;
    margin-bottom: 20px;
}
.littlemsg {
  padding-left: 20px !important;
}
.littlemsg p {
  font-size: 16px !important;
}
.littlemsg p:nth-child(1) {
  margin-top: 70px !important;
}
.time {
  width: 30%;
  text-align: right;
  display: inline-block;
}
.announcement {
  padding: 10px;
  width: 1200px;
  height: 380px;
  margin: 20px auto 0;
  background: #fff;
  box-sizing: border-box;
}
.title {
  font-size: 22px;
  color: #333333;
  font-size: 22px;
  margin: 10px 0;
  font-weight: bolder;
  text-align: left;  
}
.heard {
  width: 100%;
  height: 120px;
  position: relative;
  overflow: hidden;
}
.heard:hover img {
  transform: scale(1.1);
}
.heard img {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}
.heard div {
  color: white;
  width: 100%;
  height: 120px;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  padding: 0 30px;
  box-sizing: border-box;
}
.heard div p:first-child {
  margin-top: 40px;
  font-size: 22px;
  color: #fffefe;
}
.heard div p:nth-child(2) {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 16px;
  color: #fffefe;
  cursor: pointer;
}
.newslist {
  overflow: hidden;
}
.newslist ul li a {
  display: inline-block;
  width: 70%;
}
.newslist ul li:hover {
  color: #cd9c54;
}
.newslist ul li {
  padding: 0 10px;
  font-size: 16px;
  color: #333;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px dashed #ccc;
  display: flex;
  justify-content: space-between;
}
.newslist ul li span:first-child {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
